/**
 * Created by maiseries on 2018/1/2.
 */
import React from 'react';
import {
    View,
    Image,
    Text,
    TouchableWithoutFeedback,
    StyleSheet
} from 'react-native';


export default class AssetTypeIconBtn extends React.Component{

    static propTypes = {
        style: React.PropTypes.number,
        wrap: React.PropTypes.number.isRequired,
        icon: React.PropTypes.number.isRequired,
        text: React.PropTypes.string.isRequired,
        onPress: React.PropTypes.func,
    }

    constructor(prop){
        super(prop);
        this.state = {}
    }
    render(){

        const wrap = this.props.wrap;
        const icon = this.props.icon;
        const text = this.props.text;

        return(
            <View style={[base.columnCC ,styles.container,{width: layout.MAX_WIDTH/wrap},this.props.style]}>
                <TouchableWithoutFeedback onPress={()=>this.props.onPress?this.props.onPress():{}}>
                    <View style={[base.columnCC ,styles.box]}>
                        <Image
                            style={styles.icon}
                            source={icon}
                        />
                        <Text allowFontScaling={false} style={[styles.text,{
                            fontSize: wrap > 3 ? layout.font(24) : layout.font(28)
                        }]}>{text}</Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {

    },
    box: {

    },
    icon: {
        width: layout.width(90),
        height: layout.height(90),
    },
    text: {
        marginTop: layout.GAP_HORIZONTAL_SMALL,
        color: layout.MAIN_FONT_COLOR,
        fontSize: layout.font(24)
    }
});